<template>
  <div class="hello">
    <img :src="'img/'+item.productImage">
    <div class="right">
      <p>{{item.productName}}</p>
      <p>{{item.salePrice}}</p>
      <p style="color:red"><el-button @click="add(item)">加入购物车</el-button></p>      
    </div>

  </div>
</template>

<script>
export default {
  props:{
    item:Object
  },
  data() {
    return {
      
    }
  },
  methods: {
    add(item){
      // console.log(item);
      this.$emit('add',item)
      // if(localStorage.getItem('name')){
      //   console.log(1);
      // }
    }
  },
}
</script>

<style lang="scss">
@media screen and (max-width: 600px){
  header{
    height: 6vh;
    line-height: 6vh;
  }
  .hello{
    width: 100%;
    height: 16vh!important;
    display: flex!important;
    align-items: center!important;
    img{
      width: 50%!important;
      height: 70%!important;
    }
    div{
      width: 50%;
      height: 100%;
      text-align: center;
    }
    button{
      width: 15vh;
    }
    margin: 2vh;

  }
}
.hello{
  width: 240px;
  height: 300px;
  text-align: center;
  margin: 20px;
  img{
    width: 80%;
    height: 60%;
  } 
  div{
    
    p{
      width: 100%;
    }    
  }

}
.hello:hover{
  transform: scale(1.1);
  border: 1px solid orange;
  transition: all 1.2s;
}
</style>
